<template>
 <div class="box">
    <h1>乌克兰战争委员会</h1>
	<form>
		<label for="username">Username</label>
		<input type="text" v-model="aa" id="username" name="username" placeholder="Enter your username">

		<label for="password">Password</label>
		<input type="password" v-model="bb" id="password" name="password" placeholder="Enter your password">

		<button type="submit" @click="btn">Login</button>

		<p>Don't have an account? <a href="#">Sign up here</a></p>
	</form>
 </div>
</template>
<script>
export default{
        data () {
                return {
                    aa:'',
                    bb:''      
                }
        },
        created () {
        },
        computed:{
        },
        methods:{
            btn(){
                if(this.aa==123456&&this.bb==123456){
                this.$router.push({name:'home',params:{name:'小明'}})
            }else{
                alert('账号密码错误')
            }
            }
        }
}
</script>
<style lang='less'  scoped>
 body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
		}

		h1 {
			color: #333;
			text-align: center;
			margin-top: 50px;
		}

		form {
			max-width: 500px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
			border-radius: 5px;
		}

		input[type="text"], input[type="password"] {
			width: 100%;
			padding: 12px 20px;
			margin: 8px 0;
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
		}

		button {
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			width: 100%;
			font-size: 16px;
			transition: background-color 0.3s ease;
		}
		
		button:hover {
			background-color: #3e8e41;
		}

		a {
			color: #4CAF50;
			text-decoration: none;
		}
</style>
